<template>
  <div class="app-container">
    <div class="margin-bottom">请先选择类加载器,然后再点击 sqlIds 来获取语句信息; 在类加载器中上传 Mybatis 的接口类, 能更好的解析参数信息</div>
    <el-row>
      <el-col :span="10">
        <mybatis-xml-file-manager @showSqlIds="showSqlIds"/>
      </el-col>

      <el-col :span="14">
        <div class="padding-left">
          <label>类加载器: </label>
          <el-select v-model="classloaderName" size="small" @change="switchClassloader">
            <el-option v-for="classloader in classloaders" :key="classloader" :value="classloader" :label="classloader" />
          </el-select>

          <template v-if="statementInfo">
            <p class="text-forestgreen">通过点击一行数据,来确定 sqlId, 然后填写好参数, 就可以获取 sql 了</p>
            <p>名称空间: {{statementInfo.namespace}}</p>
            <el-table
              :data="statementInfo.statementIdInfos"
              border
              stripe
              height="350"
              size="mini"
              @row-click="choseStatementId"
            >
              <el-table-column
                label="sqlId"
                prop="sqlId"
              />
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>

    <el-row v-if="statementInfo">
      <el-col :span="24">
        <div class="padding-left">
          <div class="margin-top margin-bottom" style="display: flex">
            <el-button-group class="margin-right">
              <el-button :disabled="!boundSqlParam.statementId" size="small" @click="configStatementParam">填写参数</el-button>
              <el-button :disabled="!boundSqlParam.statementId" size="small" type="primary" @click="boundSql">获取SQL</el-button>
            </el-button-group>
            <data-source-chose  @changeConnName="changeConn" @changeNamespace="changeNamespace"/>
            <el-button class="margin-left" size="small" @click="executeSQL" type="primary" :disabled="!sql || !connName">执行</el-button>
          </div>

          <el-input v-model="sql" :autosize="{ minRows: 5, maxRows: 10}" type="textarea" :disabled="!boundSqlParam.statementId"/>

        </div>
      </el-col>
    </el-row>

    <el-row v-show="resultDialog.show">
      <el-col :span="24">
        <el-table
          :data="resultDialog.dynamicTableData.rows"
          style="width: 100%"
          height="500"
          size="mini"
        >
          <el-table-column
            v-for="header in resultDialog.dynamicTableData.headers"
            :key="header.columnName"
            :prop="header.columnName"
            :label="header.columnName"
            sortable
          />
        </el-table>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialog.show" :title="dialog.title">
      <el-button size="small" type="primary" class="margin-bottom" @click="dialog.show = false">确定</el-button>
      <json-editor :json="boundSqlParam" @change="updateParam" />
    </el-dialog>

  </div>
</template>

<script>
import core from '../../../api/core'
import mybatis from '../../../api/mybatis'
import database from '../../../api/database'

import MybatisXmlFileManager from '@/views/call/mybatis/MybatisXmlFileManager'
import JsonEditor from '@/components/JsonEditor'
import DataSourceChose from '@/views/database/DataSourceChose'

export default {
  name: 'mybatis',
  components: { MybatisXmlFileManager,JsonEditor,DataSourceChose },
  data() {
    return {
      classloaders: [],
      classloaderName: null,
      statementInfo: null,
      boundSqlParam: {statementId: null,params: []},
      connName: null,
      namespace: null,
      sql: null,
      dialog: {
        title: '配置执行参数',
        show: false
      },
      resultDialog: {
        title: '执行结果',
        show: false,
        dynamicTableData: {}
      }

    }
  },
  mounted() {
    // 加载所有类加载器
    core.classloaders().then(res => {
      this.classloaders = res.data;
    })
  },
  methods: {
    updateParam(json){
      this.boundSqlParam = json;
    },
    configStatementParam(){
      this.dialog.show = true
    },
    boundSql(){
      mybatis.boundSql(this.boundSqlParam).then(res => {
        this.sql = res.data
      })
    },
    executeSQL(){
      database.executeQuery(this.connName,this.namespace,this.sql).then(res => {
        this.resultDialog.show = true;
        this.resultDialog.dynamicTableData = res.data[0];
      })
    },
    changeConn(connName){
      this.connName = connName;
    },
    changeNamespace(namespace){
      this.namespace = namespace;
    },
    showSqlIds(project,fileName){
      if (!this.classloaderName){
        this.$confirm('没有选择类加载器,确定获取语句列表吗', '警告', { type: 'warning' }).then(() => {
          this.loadStatementInfo(project,fileName);
        }).catch(() => {})
      }else {
        this.loadStatementInfo(project,fileName);
      }
    },
    loadStatementInfo(project,fileName){
      mybatis.statementInfo(project,fileName,this.classloaderName).then(res => {
        this.statementInfo = res.data;
      })
      this.boundSqlParam.project = project;
      this.boundSqlParam.fileName = fileName;
      this.boundSqlParam.classloaderName = this.classloaderName;
    },
    switchClassloader(classloader){
      this.classloaderName = classloader;
    },
    choseStatementId(row, column, event){
      this.boundSqlParam.statementId = row.id;
      // this.$set(this.boundSqlParam,'statementId',row.id);
      this.boundSqlParam.params = [];
      for (let i = 0; i < row.parameterInfos.length; i++) {
        this.boundSqlParam.params.push({parameterInfo: row.parameterInfos[i],value: null})
      }
    }
  }
}
</script>


